/* eslint-disable react/prop-types */

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import WorksScrollList from 'components/WorksScrollList';

import * as userAction from './UserAction';

@connect(null, buildActionDispatcher)
export default class UserComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.loadPage = this.loadPage.bind(this);
  }

  loadPage(pageId, limit) {
    const { params, userAction } = this.props;
    return userAction.getUserWorks(params.id, pageId, limit).then((data) => {
      this.setState({
        userWork: data.assetList && data.assetList[0],
        userWorkCount: data.totalCount || 0,
      });
      return data;
    });
  }

  render() {
    const { userWork, userWorkCount } = this.state;
    const userName = userWork && userWork.userName;
    const userImagePath = userWork && userWork.userImagePath;
    return (
      <div id="user-home">
        <div className="user-info">
          {userImagePath && <p className="user-avatar"><img src={userImagePath} /></p>}
          <p className="user-name">{userName}</p>
          <p className="items-count">已发布 {userWorkCount} 件作品</p>
        </div>
        <WorksScrollList loadPage={this.loadPage} />
      </div>
    );
  }
}

function buildActionDispatcher(dispatch) {
  return {
    userAction: bindActionCreators(userAction, dispatch),
  };
}
